<template>
	<view class="account">
		<view class="navHeader" @click="backPlaceOrder">
			 <u-navbar
				height="34"
				leftText="点餐"
				@rightClick="rightClick"
				:autoBack="true">
			 </u-navbar>
		</view>
		
		<view class="message">
			<view class="peopleNum">
				<view class="num">人数</view>
				<view>{{orderData.dinnerNum}}人</view>
			</view>
			<view class="tableNum">
				<text class="num">桌号</text>
				<view>{{orderData.tableNum}}</view>
			</view>
			<view class="payment">
				<text class="num">支付方式</text>
				<view>微信支付</view>
			</view>
			<view class="order">
				<text class="orderTit">城市食堂</text>
				<view class="orderFood" v-for="(item, index) in orderFoodData" :key="item.id">
					<view class="orderText">
						<image class="orderImg" :src="item.image"></image>
						<view class="messageTit">
							<view style="font-weight: bold;">{{ item.tasteName }}</view>
							<text style="font-size: 25rpx;">{{item.size}}</text>
							<view>x {{ orderFoodNum[index].number}}份</view>
						</view>
						<span style="font-size: 20rpx;">￥</span><view style="font-weight: bold;">{{parseFloat(item.price)}}</view>
					</view>
				</view>
			</view>
			<view class="payMonney">
				<view>小计：<span style="font-size: 20rpx;color: red;">￥</span></view>
				<view style="color: red;font-size: 40rpx;">{{orderData.totalPrice}}</view>
			</view>
			
		</view>
		<view class="btn">
			<u-button @click="payMent" type="primary" text="确认支付" color="#FF3030" :customStyle="{'border-radius': '50rpx'}"></u-button>
		</view>
	</view>
</template>

<script>
import { wxPay, byOrderId_OrderDetail, byOrderId_foodDetail, byOrderId_OrderNum, editOrder } from '@/common/http.api.js'
export default {
		data() {
			return {
				seatValue:'',
				tableSeat:'',
				totalMoney:'',
				shopData:this.$store.state.shopData,
				orderId:'',
				orderData: '',
				orderFoodData:[],
				orderFoodNum: []
			}
		},
		onLoad(obj) {
			// this.seatValue = obj.seatValue
			// this.tableSeat = obj.tableSeat
			// this.totalMoney = obj.totalMoney
			this.orderId = obj.orderId
			// console.log(this.orderId)
			byOrderId_OrderDetail(this.orderId).then( res => {
				this.orderData = res.data
			})
			Promise.all([ byOrderId_foodDetail(obj.orderId), byOrderId_OrderNum(obj.orderId) ]).then( res => {
				// console.log(res)
				this.orderFoodData = res[0].rows
				this.orderFoodNum = res[1].rows
			})
		},
		methods: {
			//支付
			payMent(){
				const payData = {
					body: this.orderId,
					outTradeNo: this.orderId,
					totalFee: this.orderData.totalPrice,
					spbillCreateIp: '192.168.8.33',
					payType: '微信支付'
				}
				wxPay(payData).then( res => {
					// console.log(res)
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.data.timeStamp,
						nonceStr: res.data.nonceStr,
						package: res.data.package,
						signType: res.data.signType,
						paySign: res.data.paySign,
						success: resp => {
							// console.log(resp)
							let orderSucc = {
								id: this.orderId,
								currentStatus: '已支付'
							}
							editOrder(orderSucc).then( respo => {
								uni.showToast({
									icon: 'success',
									title: '支付成功'
								})
								uni.reLaunch({
									url: `/pagesB/order/orderDetail/orderDetail?orderId=${this.orderId}`
								})
							})
							
						},
						fail: err => {
							console.log(err)
							let orderFail = {
								id: this.orderId,
								currentStatus: '支付失败'
							}
							editOrder(orderFail).then( respo => {
								uni.showToast({
									icon: 'none',
									title: '支付失败'
								})
								uni.reLaunch({
									url: `/pagesB/order/orderDetail/orderDetail?orderId=${this.orderId}`
								})
							})
						}
					})
				})
			},
			
			backPlaceOrder(){
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="less" scoped>
.account{
	.message{
		margin-top: 100rpx;
		.peopleNum, .tableNum, .payment, .remark{
			margin: 15rpx;
			box-sizing: border-box;
			width: 95%;
			height: 90rpx;
			display: flex;
			font-size: 30rpx;
			justify-content: center;
			align-items: center;
			background-color: #fff;
			border-radius: 20rpx;
			.num{
				margin-left: 10rpx;
				flex: 1;
			}
		}
		.order{
			margin: 10rpx 20rpx;
			font-size: 30rpx;
			background-color: #fff;
			border-radius: 20rpx;
			.orderTit{
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				text-align: left;
				font-weight: bold;
			}
			.orderFood{
				.orderText{
					display: flex;
					justify-content: center;
					align-items: center;
					margin-top: 25rpx;
				}
				.orderImg{
					width: 110rpx;
					height: 110rpx;
					border-radius: 15rpx;
				}
				.messageTit{
					flex: 1;
					margin-left: 20rpx;
				}
			}
		}
		.payMonney{
			padding: 0 20rpx;
			display: flex;
			justify-content: flex-end;
		}
	}
	
	.btn{
		position: fixed;
		bottom: 20rpx;
		right: 20rpx;
	}
	
}
</style>
